{% extends "base.html" %}
{% block title %}
<title>奇异书屋</title>
{% endblock %}

{% block content %}
<div class="hidden-xs">
<span class="legend" >随便推荐</span>
<div class="row hidden-xs">
    {% for book in random_books %}
    <div class="col-xs-6 col-sm-3" style='padding: 0px'>
        <a target="_blank" href="/book/{{book.id}}"><img class="lazy center-block random-book-img" data-original="{{IMG}}/get/thumb_155_220/{{book.id}}.jpg?t={{book.timestamp}}" alt="cover"/></a>
            <div class="caption">
                <span><input type="number" class="rating"
                    onchange="update_rating(this, {{book.id}});"
                    value="{%if book.rating%}{{book.rating}}{%endif%}"
                    data-min=0 data-max=10 data-size="xs" ></span>
                <h5><a target="_blank" class="text-center book-title" href="/book/{{book.id}}">{{book.title}}</a></h5>
            </div>
    </div>
    {% endfor %}
</div>
</div>

<div class="visible-xs-block">
<div id="carousel-books" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        {% for book in random_books %}
        <li data-target="#carousel-books" data-slide-to="{{loop.index}}" {%if loop.first%} class="active" {%endif%}></li>
        {% endfor %}
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        {% for book in random_books %}
        <div class="item {%if loop.first%}active{%endif%}">
            <a href="/book/{{book.id}}"><img class="lazy center-block" style='width: auto; height:420px' data-original="{{IMG}}/get/thumb_600_840/{{book.id}}.jpg?t={{book.timestamp}}" alt="{{book.title}}"/></a>
        </div>
        {%endfor%}
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-books" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-books" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div>

<span class="legend">新书推荐</span>
<div class="row">
    {% for book in new_books %}
    <div class="col-sm-6">
        <div class="media new-book">
            <a class="pull-left" target="_blank" href="/book/{{book.id}}"><img class="lazy center-block new-book-img media-object" data-original="{{IMG}}/get/thumb_68_90/{{book.id}}.jpg?t={{book.timestamp}}" alt="cover"/></a>
            <div class="media-body">
                <h4 class="media-heading"><a class="book-title" target="_blank" href="/book/{{book.id}}">{{book.title}}</a></h4>
                <p class="book-comments">
                <a target="_blank" href="/author/{{book.author_sort|urlencode}}">{{book.authors|join(", ")}}</a>
                {% if book.publisher %}/ <a target="_blank" href="/pub/{{book.publisher|urlencode}}">{{book.publisher}}</a>{%endif%}
                <br/>
                {% if book.comments %}{{book.comments|striptags}}{%else%}点击浏览详情{%endif%}
                </p>
            </div>
            <div>
            </div>
        </div>
    </div>
    {% if loop.index is divisibleby(2) %}
    <div class="clearfix"></div>
    {% endif %}
    {% endfor %}
</div>
{% endblock %}

{% block sidebar %}
{% include "sidebar/basic.html" %}
{% endblock %}

{% block meta %}
<meta name="Keywords" content="在线 电子书 下载 推送 kindle epub mobi" />
<meta name="description" content="这是个安静读书的地方。在线阅读Epub/Mobi/Pdf/Azw3等格式的电子书，也支持下载或推送到Kindle设备里。" />
{% endblock %}

{% block script %}
<script src="{{static_url("js/hammer.min.js")}}"></script>
<script src="{{static_url("js/jquery.hammer.js")}}"></script>
<script>
$('#carousel-books').hammer().on('swipeleft', function(){
    $(this).carousel('next');
});
$('#carousel-books').hammer().on('swiperight', function(){
    $(this).carousel('prev');
});

function load_image(image) {
    // prevents the loaded image if it is already loaded
    image = $(image);
    var src = image.data('original');

    if (typeof src !== "undefined" && src != "") {
        image.attr('src', src)
        image.data('original', '');
    }
}

var cHeight = 0;
$('#carousel-books').on('slide.bs.carousel', function(e) {
    var nextImage = null;

    activeItem = $('.active.item', this);
    load_image(activeItem.find("img")[0] );

    if (e.direction == 'left'){
        nextImage = activeItem.next('.item').find('img');
    } else {
        if (activeItem.index() == 0){
            nextImage = $('img:last', activeItem.parent());
        } else {
            nextImage = activeItem.prev('.item').find('img');
        }
    }

    // prevents the slide decrease in height
    if (cHeight == 0) {
        cHeight = $(this).height();
        activeItem.next('.item').height(cHeight);
    }
    load_image(nextImage);

});
</script>
{% endblock %}

